<template>
	<view class="contentbigbox" :style="{ 'background-color': '#f6f6f6' }">
		<view>
			<scroll-view scroll-y="true" class="chatbox " :scroll-top="scrollTop" @scroll="scroll" @click="hiddenaw">
				<!-- <image class="chatb" src="../../static/robot/writeb.png" mode=""></image> -->
				<view class="" style="padding:20rpx 20px;position: relative;z-index: 1;">
					<view style="overflow: hidden;padding:20rpx 0" class="chat-item" v-for="(item, index) in chatList"
						:key="index">
						<view class="headimg" v-if="item.who == 1">
							<image class="" :src="item.avatar" mode=""></image>
						</view>
						<view class="robotchat chat" v-if="item.who == 1">
							<rich-text :nodes="item.content"></rich-text>
							<!-- <view>{{ item.content }}</view> -->
						</view>
						<view class="headimgright" v-if="item.who == 2">
							<image class="" :src="item.avatar" mode=""></image>
						</view>
						<view class="minechatbox" v-if="item.who == 2">
							<view class="minechat chat"><rich-text :nodes="item.content"></rich-text></view>
						</view>
					</view>
					<view class="integral-tips">
						每发一条消息将会消耗<text>{{integral}}</text>积分哦～
					</view>
				</view>
			</scroll-view>
			<view class="bottominp">
				<view class=" inpbox flexr">
					<view class="input">
						<input type="text" placeholder="聊一聊" placeholder-style="color:rgba(0,0,0,0.5)"
							v-model="comitmsg" />
					</view>
					<view class="flexr btn " @click="commitsend">
						<text class="bottom-change-view">发送</text>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		queryChatList,
		chatOne,
		sendMsg,
		setReadByCustomerId,
		getDict,
		listFriendMessage
	} from "@/constant/friend.js"
	const innerAudioContext = uni.createInnerAudioContext();
	import {
		isLogin,
		toLogin,
		null2str,
		errorToShow,
		getmyDate,
		getDayName
	} from '@/config/common.js';
	var _animation; // 动画实体
	var _animationIndex = 0; // 动画执行次数index（当前执行了多少次）
	var _animationIntervalId = -1; // 动画定时任务id，通过setInterval来达到无限旋转，记录id，用于结束定时任务
	const _ANIMATION_TIME = 500; // 动画播放一次的时长ms
	var timer = null
	import {
		socket
	} from "@/config/socket.js"
	export default {
		mixins: [socket],
		data() {
			return {
				open: false,
				usevoice: false,
				comitmsg: '',
				chatList: [

				],
				scrollTop: 999999,
				old: {
					scrollTop: 999999
				},
				audioActionSrc: '',
				tachin: false,
				tachinbtn: false,
				animation: '',
				animationIn: true,
				openboxto: false,
				type: 0,
				params: {},
				form: {
					sendMsgType: 1, //发送消息类型 1：普通消息 2：打招呼
					type: 1, //消息类型 1：文本 2：图片 3：视频 4：语言
					receiverId: '', //接收人
					senderId: '', //发送人
					content: '',
					receiverNikeName: '',
					receiverHeadimgurl: '',
					senderNikeName: '',
					senderHeadimgurl: ''
				},
				customerId: null,
				integral: ''
			};
		},
		onShow() {

		},
		onLoad(options) {
			this.customerId = uni.getStorageSync('customerId'),
				console.log(options)
				this.params = {
					senderId: this.customerId,
					friendId: options.friendId
					// senderId:options.senderId,
				}

			this.getChatList()
			this.getDictData()
			this.$nextTick(() => {
				uni.setNavigationBarTitle({
					title: this.customerId == options.senderId ? options.receiverNickName : options
						.senderNickName
				})
			})

			// this.clearTimer()
			// timer = setInterval(() => {
			// 	this.getChatList();
			// }, 3000)
		},
		onUnload() {
			console.log('onUnload')
			this.clearTimer()
		},
		onHide() {
			console.log('onHide')
			this.clearTimer()

			console.log(timer)
		},
		// isMedia 0字符串。1文件路径
		methods: {

			getDictData() {
				getDict('greet').then(res => {
					this.integral = res.data
				})
			},
			clearTimer() {
				clearInterval(timer)
				timer = null
			},
			// 接受消息
			onMessageHandle(obj) {
				let that=this
				let myId = uni.getStorageSync('customerId')
				obj.content=this.parseMessage(obj.content)
				if (obj.fromId == this.params.friendId && obj.toId == myId) {
					this.chatList.push({
						...obj,
						who: 1,
					})
				} else if (obj.toId == this.params.friendId && obj.fromId == myId) {
					this.chatList.push({
						...obj,
						who: 2
					})
				}
				console.log(this.chatList,'this.chatList')
				this.scrollTop = this.old.scrollTop;
				this.$nextTick(function() {
					that.scrollTop = 9999;
				});
			},
			// 发送消息
			commitsend(value) {
				let info = uni.getStorageSync('customerInfo')
				let param = {
					messageType: 1,
					content:this.comitmsg,
					fromId: this.params.senderId,
					toId: this.params.friendId,
					avatar: info.headImg
				}
				let m = JSON.stringify(param)
				this.sendSocketMessage(m)
				this.comitmsg = ''
			},
			// commitsend() {
			// 	if (this.comitmsg == '') return
			// 	let info = uni.getStorageSync('customerInfo')

			// 	let params = {
			// 		sendMsgType: 1, //发送消息类型 1：普通消息 2：打招呼
			// 		type: 1, //消息类型 1：文本 2：图片 3：视频 4：语言
			// 		receiverId: this.params.receiverId, //接收人
			// 		senderId: this.params.senderId, //发送人
			// 		content: this.comitmsg,
			// 		// receiverNikeName:'',
			// 		// receiverHeadimgurl:'',
			// 		// senderNikeName:'',
			// 		senderHeadimgurl: info.headImg
			// 	}
			// 	this.chatList.push({
			// 		who: '2',
			// 		sendMsgType: 1, //发送消息类型 1：普通消息 2：打招呼
			// 		type: 1, //消息类型 1：文本 2：图片 3：视频 4：语言
			// 		receiverId: this.params.receiverId, //接收人
			// 		senderId: this.params.senderId, //发送人
			// 		content: this.comitmsg,
			// 		headImg: info.headImg
			// 	});

			// 	sendMsg(params).then(res => {
			// 		if (res.code == 0) {
			// 			this.comitmsg = ''
			// 			this.getChatList()
			// 		} else {
			// 			errorToShow(res.msg)
			// 		}
			// 	})
			// },
			// commitnavto(url, name, title, img) {
				
			// 	this.chatList.push({
			// 		who: '2',
			// 		content: {
			// 			name: name,
			// 			url: url,
			// 			title: title,
			// 			img: img
			// 		},
			// 		type: 2
			// 	});
			// 	this.scrollTop = this.old.scrollTop;
			// 	this.$nextTick(function() {
			// 		this.scrollTop = 9999;
			// 	});
			// },
			scroll(e) {
				// console.log(e);
				
				this.old.scrollTop = e.detail.scrollTop;
				
			},
			getChatList() {
				let id = uni.getStorageSync('customerId')
				let query = {
					friendId: this.params.friendId,
					current: 1,
					size: 100
				}
				listFriendMessage(query).then(res => {
				let that=this
					let list = res.data.records
					list.forEach(item => {
						item.content=this.parseMessage(item.content)
						if (item.fromId == id) {
							item.who = 2
						} else {
							item.who = 1
						}
					})
					this.chatList = list
					this.scrollTop = this.old.scrollTop;
					this.$nextTick(function() {
						that.scrollTop = 9999;
					});
					// console.log(this.scrollTop)
					// console.log(this.old.scrollTop)
				})
				// setReadByCustomerId({
				// 	id: this.params.receiverId * 1
				// }).then(res => {

				// })
			}
		},

		onHide() {
			this.animationIn = false;
			clearInterval(timer);

		}

	};
</script>
<style>
	@import url('@/css/common.css');
</style>
<!-- animate__heartBeat -->
<style lang="scss">
	.shoplistshadow {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 40;
	}

	.thingcon {
		width: 86%;
		border-radius: 10rpx;
		background-color: #fff;
		margin-top: 24rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;

		.thingconlist {
			margin: 34rpx 0;
			overflow: hidden;

			image {
				width: 160rpx;
				height: 120rpx;
				border-radius: 10rpx;
				float: left;
				margin: 0 20rpx;
			}

			.listmsg {
				width: 30%;
				float: left;
				margin-top: 10rpx;

				.lmname {
					width: 100%;
					height: 44rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 32rpx;
					color: #000;
					font-weight: bold;
					line-height: 44rpx;
				}

				.lmcon {
					font-size: 26rpx;
					color: #222222;
					line-height: 36rpx;

					text {
						padding: 0 4rpx;
					}
				}
			}

			.lmtime {
				float: right;
				margin-right: 20rpx;
				font-size: 26rpx;
				line-height: 34rpx;
				margin-top: 34rpx;
				color: #212121;
			}
		}
	}

	.voicebox {
		position: fixed;
		top: 500rpx;
		right: 1%;
		width: 98%;
		border-radius: 20rpx;
		background-color: #312c55;
		height: 300rpx;
		z-index: 999;
	}

	.imgb2 {
		width: 100%;
		height: 115rpx;
		position: absolute;
		bottom: 0rpx;
		left: 0;
	}

	.animate__heartBeats {
		-webkit-animation-name: heartBeats;
		animation-name: heartBeats;
		-webkit-animation-duration: 2.3s;
		animation-duration: 2.3s;
		// -webkit-animation-duration: calc(1 * 1.2);
		// animation-duration: calc(1 * 1.2);
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
	}

	.turn {
		width: 100px;
		height: 100px;
		background: aqua;
		animation: turn 4s linear infinite;
		margin: 100px auto;
	}

	/* 
      turn : 定义的动画名称
      1s : 动画时间
      linear : 动画以何种运行轨迹完成一个周期
      infinite :规定动画应该无限次播放
     */
	@keyframes turn {
		0% {
			-webkit-transform: rotate(0deg);
		}

		25% {
			-webkit-transform: rotate(90deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
		}

		75% {
			-webkit-transform: rotate(270deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	@-webkit-keyframes heartBeats {
		0% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}

		20% {
			-webkit-transform: scale(1.1);
			transform: scale(1.2);
		}

		40% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}

		60% {
			-webkit-transform: scale(1.2);
			transform: scale(1.2);
		}

		80% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}

	.animate__pulses {
		-webkit-animation-name: pulses;
		animation-name: pulses;
		-webkit-animation-duration: 1.3s;
		animation-duration: 1.3s;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
	}

	@-webkit-keyframes pulses {
		0% {
			height: 100rpx;
		}

		50% {
			height: 185rpx;
		}

		100% {
			height: 100rpx;
		}
	}

	.topstatus {
		height: var(--status-bar-height);
		background-color: #fff;
	}

	.topbar {
		border-bottom: 1px solid rgba(204, 204, 204, 0.3);
		// height: var(--window-top);
		background-color: #fff;
		width: 100%;

		image {
			width: 64rpx;
			height: 64rpx;
			margin: 0 30rpx;
		}

		view {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}

	.viocecontent {
		width: 100%;
		text-align: center;
		position: absolute;

		.imgb1 {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.callme {
			width: 100%;
			height: 100%;
			justify-content: center;
			text-align: center;

			.title {
				margin-bottom: 10rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 42rpx;
			}

			.content {
				font-size: 36rpx;
				font-family: PingFang SC;
				// font-weight: bold;
				color: #ffffff;
				line-height: 46rpx;
				height: 92rpx;
				padding: 0 1%;
				width: 98%;
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}

	.voicetach {
		position: fixed;
		bottom: 130rpx;
		right: 30rpx;
		width: 115rpx;
		height: 115rpx;
	}

	.voicetop {
		width: 90%;
		margin: 15rpx auto;
		justify-content: space-between;

		.voicetitle {
			image {
				width: 46rpx;
				height: 42rpx;
				margin-right: 20rpx;
			}

			view {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 44rpx;
			}
		}

		.voiceother {
			line-height: 42rpx;
			color: #fff;

			image {
				width: 46rpx;
				height: 42rpx;
				margin: 0 20rpx;
			}
		}
	}

	.Commonlanguage {
		width: 100%;
		background: #f3f3f9;

		.cllist {
			margin: 0 auto;
			width: 96%;
			height: 99rpx;
			border-bottom: 1px solid rgba(47, 42, 83, 0.2);

			image {
				width: 48rpx;
				height: 45rpx;
				margin: 0 16rpx 0 26rpx;
			}
		}
	}

	-webkit-scrollbar {
		display: none;
	}

	.voiceto {
		position: fixed;
		bottom: 150rpx;
		right: 30rpx;
		width: 116rpx;
		height: 116rpx;
		z-index: 4;
	}

	// /* #ifdef H5 */
	// .bottominp {
	// 	position: fixed;
	// 	bottom: 100rpx !important;
	// 	left: 0;
	// 	width: 100%;
	// 	background-color: #fff;
	// }
	// /* #endif */
	// .bottominp {
	// 	position: fixed;
	// 	bottom: 0;
	// 	left: 0;
	// 	width: 100%;
	// 	background-color: #fff;
	// 	.tipsquestionul{
	// 		min-width: 100%;
	// 		position: absolute;
	// 		top:-78rpx;
	// 		left: 0;
	// 		white-space: nowrap;
	// 		// width: 100%;
	// 		background-color: #fff;
	// 		.tipsquestionbox{
	// 			height: 80rpx;
	// 		}
	// 		.tipsquestionli{
	// 			height: 60rpx;
	// 			line-height: 60rpx;
	// 			border-radius: 40rpx;
	// 			padding: 0 26rpx;
	// 			display: inline-block;
	// 			background-color: rgba(0,0,0,.1);
	// 			color:#aaaaff;
	// 			font-size: 28rpx;
	// 			margin:10rpx 10rpx;
	// 		}
	// 	}
	// 	.inpbox {
	// 		width: 100%;
	// 		height: 100rpx;
	// 		justify-content: space-around;
	// 		.img1 {
	// 			width: 66rpx;
	// 			height: 66rpx;
	// 		}
	// 		.input {
	// 			padding: 0 20rpx;
	// 			box-sizing: border-box;
	// 			width: 68%;
	// 			height: 76rpx;
	// 			background: #eeeef8;
	// 			border-radius: 10rpx;
	// 			position: relative;
	// 			z-index: 0;
	// 			input {
	// 				width: 100%;
	// 				height: 100%;
	// 				z-index: 0;
	// 			}
	// 			view {
	// 				position: absolute;
	// 				top: 0;
	// 				left: 0;
	// 				width: 100%;
	// 				height: 100%;
	// 				font-size: 28rpx;
	// 				text-align: center;
	// 				line-height: 76rpx;
	// 				background-color: rgba(0, 0, 0, 0.05);
	// 				border-radius: 10rpx;
	// 				z-index: 99999;
	// 			}
	// 			.viewactive {
	// 				background-color: rgba(0, 0, 0, 0.2);
	// 			}
	// 		}
	// 		.img2 {
	// 			width: 44rpx;
	// 			height: 35rpx;
	// 			margin: 0 10rpx;
	// 		}
	// 		text {
	// 			font-size: 32rpx;
	// 			font-family: Alibaba PuHuiTi;
	// 			font-weight: 400;
	// 			color: #312c55;
	// 			line-height: 44rpx;
	// 		}
	// 	}
	// }
	.topnav {
		width: 100%;
		height: 160rpx;
		background-color: #fff;
		position: relative;
		z-index: 1;

		view {
			width: 25%;

			image {
				width: 64rpx;
				height: 64rpx;
			}

			text {
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #333;
				text-align: center;
			}
		}
	}

	.contentbigbox {
		overflow: hidden;
		min-height: 100vh;
		// background-image: $uni-bg;

	}

	.robothello {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fefefe;
		margin-top: 28rpx;
		margin-bottom: 19rpx;
		position: relative;

		.voiceopen {
			position: absolute;
			top: 0;
			right: 0;

			text {
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #ffffff;
				line-height: 44rpx;
			}

			.btnvoicebox {
				margin-left: 20rpx;
				width: 84rpx;
				height: 42rpx;
				background: #d83819;
				border-radius: 21rpx;
				position: relative;

				.btnvoice {
					position: absolute;
					top: 0;
					left: 2rpx;
					width: 40rpx;
					height: 40rpx;
					background: #fc943e;
					border-radius: 50%;
				}

				.btnvoiceright {
					left: 40rpx !important;
				}
			}
		}
	}

	.robottips {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #c9b7f5;
		line-height: 44rpx;
	}

	.robot_quick {
		overflow: hidden;
		background-color: rgba(96, 83, 133, 0.6);
		position: relative;

		.rq_title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			line-height: 50rpx;
		}

		.jiantou {
			position: absolute;
			top: 37rpx;
			right: 50rpx;
			width: 22rpx;
			height: 15rpx;
		}

		.rq_questionbox {
			.rq_question {
				image {
					width: 40rpx;
					height: 40rpx;
					margin: 0 20rpx 0 10rpx;
				}

				.rq_qcontent {
					width: 86%;
					justify-content: space-between;
					padding: 20rpx 0;
					border-bottom: 1px solid rgba(106, 94, 143, 1);

					.question {
						width: 80%;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
						// line-height: 40rpx;
					}

					.commit {
						background-color: rgba(49, 44, 85, 0.3);
						padding: 0 20rpx;
						border-radius: 20rpx;
						// height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						color: rgba(194, 176, 237, 1);
					}
				}
			}
		}
	}

	.border0 {
		border: 0 !important;
	}

	.chatbox {
		height: calc(100vh - 150rpx);
		width: 100%;
		// padding:0 32rpx;
		// margin: 10rpx auto;
		border-radius: 0px;
		position: relative;
		z-index: 0;

		// .chatb {
		// 	width: 100%;
		// 	height: 100%;
		// 	border-radius: 10rpx;
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	z-index: -1;
		// }
		.chatb {
			width: 100%;
			height: calc(100vh - 250rpx);
			border-radius: 0;
			position: fixed;
			top: 278rpx;
			left: 0;
			z-index: -1;
		}

		.chat {
			display: inline-block;
			max-width: 76%;
			padding: 12rpx 22rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 40rpx;
			overflow: hidden;
			margin: 10rpx 0 10rpx 20rpx;
		}

		.robotchat {
			background: #fff;
			color: #333;
			border-radius: 0 10rpx 10rpx 10rpx;
		}

		.minechatbox {
			width: 100%;

			.time {
				// float: right;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(254, 254, 255, 0.5);
				line-height: 44rpx;
				text-align: right;
			}
		}

		.minechat {
			border-radius: 10rpx 0 10rpx 10rpx;
			float: right;
			background-color: #f5783e;
		}
	}

	.voicebtn {
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		margin-left: -97.5rpx;
		display: inline-block;
		text-align: center;

		image {
			width: 195rpx;
			height: 195rpx;
		}

		text {
			display: block;
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #ffffff;
			line-height: 24rpx;
		}
	}

	.commitfoot {
		position: fixed;
		bottom: 0;
		left: 4%;
		padding: 14rpx 19rpx;
		background-color: rgba(254, 150, 61, 0.7);
		border-radius: 50rpx;

		image {
			width: 30rpx;
			height: 30rpx;
		}

		input {
			width: 79%;
			margin-left: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: rgba(2555, 255, 255, 0.8);
		}

		text {
			border-left: 1px solid rgba(84, 10, 1, 0.3);
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 44rpx;
			padding-left: 28rpx;
		}
	}

	/* #ifdef H5 */
	.bottominp {
		position: fixed;
		bottom: 0rpx !important;
		left: 0;
		width: 100%;
		padding: 20rpx 0;
	}

	/* #endif */
	.bottominp {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 100%;
		padding: 20rpx 0;
		background-color: #fff;

		.tipsquestionul {
			min-width: 100%;
			position: absolute;
			top: -78rpx;
			left: 0;
			white-space: nowrap;

			// width: 100%;
			.tipsquestionbox {
				height: 80rpx;
			}

			.tipsquestionli {
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 40rpx;
				padding: 0 26rpx;
				display: inline-block;
				// background-color: rgba(0,0,0,.1);
				color: #ffffff;
				border: 1px solid #ffffff;
				font-size: 28rpx;
				margin: 10rpx 10rpx;
			}
		}

		.inpbox {
			width: 100%;
			height: 100rpx;

			justify-content: space-around;

			.img1 {
				width: 66rpx;
				height: 66rpx;
			}

			.input {
				padding: 0 20rpx;
				box-sizing: border-box;
				width: 520rpx;
				height: 76rpx;
				position: relative;
				z-index: 0;
				color: #333;
				border-radius: 50rpx;
				background-color: #eeeeee;

				input {
					width: 100%;
					height: 100%;
					z-index: 0;

					// border-bottom:2px solid #eeeef8;
					color: #333;
				}


				.viewactive {
					// background-color: rgba(0, 0, 0, 0.2);
				}
			}

			.img2 {
				width: 44rpx;
				height: 35rpx;
				margin: 0 10rpx;
			}

			text {
				background-color: #d83819;
				width: 160rpx;
				height: 76rpx;
				border-radius: 50rpx;
				text-align: center;
				line-height: 76rpx;
				display: inline-block;
				font-size: 32rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #fff;
			}
		}

		.btn {}
	}


	.chat-item {
		.headimg {
			width: 60rpx;
			height: 60rpx;
			display: inline-block;
			background-color: #FFFFFF;
			border-radius: 50%;
			vertical-align: top;
			margin-top: 10rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.headimgright {
			float: right;
			width: 60rpx;
			height: 60rpx;
			display: inline-block;
			background-color: #FFFFFF;
			border-radius: 50%;
			vertical-align: top;
			margin-top: 10rpx;
			margin-left: 20rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

	}

	.integral-tips {
		position: fixed;
		bottom: 140rpx;
		left: 15%;
		width: 70%;
		background-color: #fffdfd;
		border-radius: 10rpx;
		padding: 14rpx;
		color: #666;
		font-size: 12px;
		line-height: 26rpx;
		z-index: -1;
		letter-spacing: 1px;

		text {
			color: #333;
		}
	}
</style>